<template>
    <div class="common-layout">
        <el-container>
            <!-- <el-aside width="200px" style="background-color: #87CEEB;"> -->
            <el-aside width="200px" style="background-color: ##ffffff;">
                <SideMenu />
            </el-aside>
            <el-container>
                <el-header style="background-color: #ffffff; height: 60px;border-bottom: 1px solid #dbd9d9;">
                    <slot name="header">默认头部</slot>
                </el-header>
                <el-main style="background-color: #ffffff; padding: 20px;">
                    <router-view />
                </el-main>
                <el-footer style="background-color: #F0FFF0; height: 40px;">
                    <slot name="footer">默认底部</slot>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import SideMenu from './SideMenu.vue';
</script>

<style scoped>
.common-layout {
    height: 100vh;
}

.el-container {
    border: 1px dashed #e5e7eb;
}
</style>    